<template>
    <div>
        <div class="top">
            <p class="baby">宝宝</p>
            <div class="headimg"><img :src="heardimg" alt=""></div>
            <span class="spanleft">{{heardleft}}</span>
            <span class="spanright">{{heardtime}}</span>
        </div>
        <div class="nav">
            <van-tabs type="link" title-active-color="block" color="block" @click="tophone">
                <van-tab title="云相册"></van-tab>
                <van-tab title="成长记录"></van-tab>
                <van-tab title="成就"></van-tab>
                <van-tab title="亲友团"></van-tab>
            </van-tabs>
        </div>
        <div class="center" >
            <div :style="{ height: '450px' }" class="scrollbar" >
                <van-slider v-model="value" vertical @change="onChange" :drag-end="drag()"/>
               
            </div>
                <ul>
                    <li v-for="(item,i) in images" :key="i">
                        <img :src="item.pimg" alt="">
                    </li>
                </ul>
                
        </div>
        <van-icon name="plus" size="40" @click="isShow"/>
        <span class="circle circle1" v-if="seen">身高体重</span>
       
        <span class="circle circle2" v-if="seen">成就</span>
       
        <span class="circle circle3" v-if="seen">照片视频</span>
        
        
        
    </div>
</template>

<script>
import axios from 'axios'
import animated from 'animate.css'
    export default {
        name:'Topxember',
         data() {
            return {
            value: 0,
            images:'',
            seen:false,
            scrollTop:'',
            oldScrollTop:'',
            newSscrollTop:'',
            heardimg:'',
            heardleft:'',
            heardtime:''
            };
        },

        methods: {
            onChange(value) {
      
            },
            tophone(index,title){
                if(index == 0){
                    this.$router.push({path:'/cloudphoto'})
                }else if(index == 1){
                   this.$router.push('/growhredcord')
                }else if(index == 2){
                    this.$router.push({path:'/achievement'})
                }else if(index == 3){

                }
                
            },
            isShow(){
                this.seen =! this.seen
            },
             handleScroll(){
               this.scrollTop = document.documentElement.scrollTop
               this.value = parseInt(this.scrollTop/9.5)
                
                
            },
            drag(){
               document.documentElement.scrollTop = this.value*9.5
            }
            
        },
        mounted() {
            window.addEventListener('scroll', this.handleScroll, true)
            var that = this
            axios({
                url:'http://jx.xuzhixiang.top/ap/api/productlist.php',
                params:{uid:11299}
            }).then(function(data){
                that.images = data.data.data
                
            }),
            axios({
                url:'http://www.txzxk.com/api'
            }).then(function(data){
                
                that.heardimg = data.data.txzxk.img
                that.heardleft = data.data.txzxk.text
                that.heardtime = data.data.txzxk.time
            })
            
        },
        watch: {
           scrollTop:function(a,b){
               this.oldScrollTop = a;
               this.newSscrollTop = b
           } 
        },
    }
</script>

<style scoped>
    .top{
        width: 100%;
        height: 247px;
        background: #f2f2f2;
        position: fixed;
        font-size: 16px;
        text-align: center;
        line-height: 30px;
        z-index: 999;
    }
    .headimg{
        position: absolute;
        left: 150px;
        top: 50px
    }
    .headimg img{
        width: 85px;
        height: 85px;
        border-radius: 50%;
    }
    .baby{
        background:#fff;
        width: 55px;
        height: 30px;
        position:absolute;
        right: 0;
        top: 0
    }
    .top span{
        position: absolute;
        display: block;
        width: 94px;
        height: 30px;
        top: 166px;
        background: #fff
    }
    .top .spanleft{
        left: 65px;
    }
    .top .spanright{
        right: 65px;
    }
    .nav{
        width: 100%;
        height: 42px;
        position: fixed;
        z-index: 999;
        top:247px;
       
    }
    .center{
        overflow:auto
    }
    .scrollbar{
        position: fixed;
        
    }
    .scrollbar .van-slider{
        left: 10px;
        top: 310px;
        
    }
    .center ul{
        position: relative;
        top: 320px;
        left: 30px;
        padding-bottom: 45px
        
    }
    .center li{
        width: 330px;
        height: 150px;
        margin-top: 20px
        
    }
    .center li img{
        width: 100%;
        height: 100%;
        border-radius: 8px;
       
    }
    .van-icon{
        background: #fff;
        position: fixed;
        right: 14px;
        bottom: 112px;
        border-radius: 50%;
        z-index: 99999
    }
    .circle{
        width: 25px;
        height: 25px;
        display: block;
        background: #fff;
        border-radius: 50%;
        position: fixed;
        z-index: 9999;
        font-size: 8px;
        text-align: center;
        
        
    }
    .circle1{
         right: 75px;
        bottom: 120px;
    }
    .circle2{
         right: 60px;
        bottom: 160px;
        line-height: 25px
    }
    .circle3{
         right: 20px;
        bottom: 180px;
    }
</style>